<!-- 修改密码 -->
<template>
    <el-dialog v-model="show" title="修改密码" top="25vh" width="580px" @close="close()">
        <el-form ref="formRef" class="update-form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="旧密码" prop="password">
                <el-input v-model="form.password" type="password" placeholder="请输入原密码" autocomplete="off" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="form.newPassword" type="password" placeholder="请输入6-16位新密码" autocomplete="off" />
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input v-model="form.checkPass" type="password" placeholder="请输入确认密码" autocomplete="off" @keyup.enter="submitForm(formRef)" />
            </el-form-item>
            <el-form-item>
                <el-alert title="密码由大写字母、小写字母、数字及特殊字符中的两种组成。" type="info" :closable="false" show-icon />
            </el-form-item>
            <div style="text-align: center;">
                <el-button @click="close()">取消</el-button>
                <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { toRefs } from 'vue';
// 引入md5
import md5 from 'md5';
// 引入接口
import { UpdatePwdApi } from '@/api/user';
// 引入store
import useUserStore from '@/store/modules/user';
// 获取pinia
const userStore = useUserStore();

// 获取当前实例
const { proxy } = getCurrentInstance();
// 用户id
const userId = computed(() => userStore.userId || '');
// 父组件传参
const props = defineProps({
    // 显示弹框
    show: {
        type: Boolean,
        default: false,
    },
});

// 表单
const data = reactive({
    form: {
        // 密码
        password: '',
        // 新密码
        newPassword: '',
        // 确认密码
        checkPass: '',
    },
    rules: {
        password: [
            { type: 'string', required: true, message: '密码不能为空!' },
            { min: 6, max: 16, message: '请输入6-16位字符密码!', trigger: 'blur' },
        ],
        newPassword: [
            { type: 'string', required: true, message: '新密码不能为空!' },
            { min: 6, max: 16, message: '请输入6-16位字符密码!', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' },
        ],
        checkPass: [
            { type: 'string', required: true, message: '确认密码不能为空!' },
            { min: 6, max: 16, message: '请输入6-16位字符密码!', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' },
        ],
    },
});
const {
    form,
    rules,
} = toRefs(data);

// 声明事件
const emit = defineEmits();
// 关闭弹框
function close() {
    // 方式一：调用父组件方法（父组件在调用子组件时，需要绑定 @close=""事件）
    // emit('close', false);
    // 方式二：修改父组件变量值（父组件在调用子组件的时，需要用 v-model:show=""的方式绑定）
    emit('update:show', false);
}

// form对象
const formRef = ref();
// 自定义密码验证
function validatePass(rule, value, callback) {
    // 校验密码必须至少包含以下两种：数字、小写字母、大写字母、特殊字符
    const reg = /^(?!^\d+$)(?!^[a-z]+$)(?!^[A-Z]+$)(?!^[^a-z0-9]+$)(?!^[^A-Z0-9]+$)(?!^.*[\u4E00-\u9FA5].*$)^\S*$/g;
    if (value === '') {
        callback(new Error('请输入密码!'));
    }
    else if (!reg.test(value)) {
        callback(new Error('密码至少包含数字、小写字母、大写字母、特殊字符中的两种!'));
    }
    else {
        if (form.value.checkPass !== '') {
            if (!formRef.value) return;
            formRef.value.validateField('checkPass', () => null);
        }
        callback();
    }
}
// 自定义确认密码验证
function validatePass2(rule, value, callback) {
    if (value === '') {
        callback(new Error('请输入确认密码!'));
    } else if (value !== form.value.newPassword) {
        callback(new Error("确认密码错误!"));
    } else {
        callback();
    }
}
// 确定按钮事件
function submitForm(formEl) {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            // 修改密码
            UpdatePwdApi({
                userId: userId.value || '',
                oldPassword: md5(form.value.password || ''),
                password: md5(form.value.newPassword || ''),
            }).then(res => {
                const { code, data } = res;
                if (code == 200) {
                    // 密码修改成功，提示退出重新登录
                    proxy.$modal.confirm('密码修改成功，是否退出重新登录？').then(() => {
                        // 退出登录
                        logout();
                    }).catch(() => {
                        // 关闭弹框
                        close();
                    });
                }
            }).catch(err => {
                console.log(err.message);
            })
        } else {
            // 跳转到首个验证失败字段位置
            formEl.scrollToField(Object.keys(fields)[0]);
            // 提示失败
            proxy.$modal.msgError('表单验证失败!');
            return false;
        }
    })
}
// 重置按钮事件
function resetForm(formEl) {
    if (!formEl) return
    formEl.resetFields();
}

// 退出登录
function logout() {
    userStore.logOut().then(res => {
      const { code, retUrl } = res;
      if (code == 200 && retUrl) {
        const tIndex = retUrl.indexOf('?toUrl=');
        if (tIndex > -1) {
          // 去掉cssSsoTicket
          const strHref = location.href.replace(/\?cssSsoTicket=.*/gi, '');
          location.href = retUrl.slice(0, tIndex + 7) + strHref;
        } else {
          location.href = retUrl;
        }
      } else {
        proxy.$modal.msgWarning('退出登录失败！');
      }
    })
}
</script>

<style lang="scss" scoped>
.update-form {
    padding: 20px 0;
}
</style>